<template>
  <div class="yzm">
    <canvas id="canvas" width="80" height="34"></canvas>
    <span id="changeImg">看不清换一张</span>
  </div>
</template>

<script>
  export default {
    mounted() {
      /**生成一个随机数**/
      function randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
      }
      /**生成一个随机色**/
      function randomColor(min, max) {
        var r = randomNum(min, max);
        var g = randomNum(min, max);
        var b = randomNum(min, max);
        return "rgb(" + r + "," + g + "," + b + ")";
      }
      drawPic();
      document.getElementById("changeImg").onclick = function(e) {
        e.preventDefault();
        drawPic();
      }

      /**绘制验证码图片**/
      function drawPic() {
        var canvas = document.getElementById("canvas");
        var width = canvas.width;
        var height = canvas.height;
        var ctx = canvas.getContext('2d');
        ctx.textBaseline = 'bottom';

        /**绘制背景色**/
        ctx.fillStyle = randomColor(180, 240); //颜色若太深可能导致看不清
        ctx.fillRect(0, 0, width, height);
        /**绘制文字**/
        var str = 'ABCEFGHJKLMNPQRSTWXY123456789';
        for(var i = 0; i < 4; i++) {
          var txt = str[randomNum(0, str.length)];
          ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
          ctx.font = randomNum(10, 20) + 'px SimHei'; //随机生成字体大小
          var x = 10 + i * 25;
          var y = randomNum(25, 45);
          var deg = randomNum(-45, 45);
          //修改坐标原点和旋转角度
          ctx.translate(x, y);
          ctx.rotate(deg * Math.PI / 180);
          ctx.fillText(txt, 0, 0);
          //恢复坐标原点和旋转角度
          ctx.rotate(-deg * Math.PI / 180);
          ctx.translate(-x, -y);
        }
        /**绘制干扰线**/
        for(var i = 0; i < 8; i++) {
          ctx.strokeStyle = randomColor(40, 180);
          ctx.beginPath();
          ctx.moveTo(randomNum(0, width), randomNum(0, height));
          ctx.lineTo(randomNum(0, width), randomNum(0, height));
          ctx.stroke();
        }
        /**绘制干扰点**/
        for(var i = 0; i < 100; i++) {
          ctx.fillStyle = randomColor(0, 255);
          ctx.beginPath();
          ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
          ctx.fill();
        }
      }
    }
  }
</script>

<style>
  .yzm{
    display: inline-block;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-bottom: 25px;
  }
  .yzm>canvas{
    margin-left: 8px;
  }
  .yzm>span{
    vertical-align: 15px;
    cursor: pointer;
    margin-left: 8px;
  }
  #changeImg {
    font-size: 14px;
    color: #4b943d;
    cursor: pointer;
  }
</style>